<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%= rootPath %>/css/lib/vis-tooltip.css">
    <link rel="stylesheet" type="text/css" href="<%= rootPath %>/css/lib/component.css">
    <link rel="stylesheet" type="text/css" href="<%= rootPath %>/css/lib/pretty-json.css">
    <link rel='stylesheet' href='<%= rootPath %>/css/style.css' />
    <link rel='stylesheet' href='<%= rootPath %>/css/models.css' />

    <!-- JQuery -->
    <script src="<%= rootPath %>/js/lib/jquery-1.12.4.min.js"></script>
    <script src="<%= rootPath %>/js/lib/jquery-ui.min.js"></script>

    <!-- d3 and vega -->
    <script src="<%= rootPath %>/js/lib/d3.min.js" charset="utf-8"></script>
    <script src="<%= rootPath %>/js/lib/vega.js" charset="utf-8"></script>
    <script src="<%= rootPath %>/js/lib/vega-lite.js"></script>
    <script src="<%= rootPath %>/js/lib/vega-embed.js" charset="utf-8"></script>
    <script src="<%= rootPath %>/js/lib/datalib.min.js"></script>
    <script src="<%= rootPath %>/js/lib/vg-tooltip.js"></script>
    <script src="<%= rootPath %>/js/lib/d3.v5.min.js" charset="utf-8"></script>
    <script src="https://bl.ocks.org/syntagmatic/raw/3341641/render-queue.js"></script>

    <!-- tinysort -->
    <script src="<%= rootPath %>/js/lib/tinysort.min.js"></script>

    <!-- lib js files -->
    <script src="<%= rootPath %>/js/lib/ejs_production.js"></script>
    <script src="<%= rootPath %>/js/lib/underscore-min.js"></script>
    <script src="<%= rootPath %>/js/lib/backbone-min.js"></script>
    <script src="<%= rootPath %>/js/lib/pretty-json-min.js"></script>

    <script src="<%= rootPath %>/js/util.js"></script>
    <script src="<%= rootPath %>/js/annotations.js"></script>
    <script src="<%= rootPath %>/js/tooltip.js"></script>
    <script src="<%= rootPath %>/js/models.js"></script>
    <script src="<%= rootPath %>/js/models_handlers.js"></script>
  </head>
  <body data-id=<%= id %> data-root="<%= rootPath %>">
    <%- include partials/nav.ejs %>
    <div class="container">

      <div class="loader">
        <img src="<%= rootPath %>/images/loading.gif">
        <div class="loader-text">
          LOADING MODELS...
        </div>
      </div>

      <div class="menu">
        <div class="menu-tabs-container">
          <div class="menu-tab selected" data-id="0">
            <div class="selected-arrow"></div>
            <img src="<%= rootPath %>/images/charts.png">
            <div class="menu-tab-label">
              Overview and Charts
            </div>
          </div>
          <div class="menu-tab" data-id="1">
            <img src="<%= rootPath %>/images/data.png">
            <div class="menu-tab-label">
              Models
            </div>
          </div>
        </div>

        <div class="menu-section-container filters-container menu0 menu1">
            <div class="filters-info">
                <h2>Filter</h2>
                Drag configs or metrics into this section to filter models based on key - value pairs.
            </div>
            <div class="selected-area filter-area"></div>
            <button class="filter-button filter-button-disabled">Filter</button>
        </div>

        <div class="menu-section-container group-container menu1">
          <div class="group-info">
            <h2>Group</h2>
            Choose field to group data table by
            <div class="select-container">
              <select class="group-by">
                <option selected value="None">None</option>
              </select>
            </div>
          </div>
        </div>

        <div class="menu-section-container menu0">
          <h2>View models by</h2>
          Select x-axis for the summary chart
          <div class="summary-toggle-radio">
            <input type="radio" name="x" value="id" id="radio-id" checked="checked">
            <label for="radio-id">Model ID</label>
          </div>
          <div class="summary-toggle-radio">
            <input type="radio" name="x" value="timestamp" id="radio-timestamp">
            <label for="radio-timestamp">Timestamp</label>
          </div>
        </div>

        <% if (false) { %>
          <div class="menu-section-container sort-container">
            <div class="sort-info">
              <h2>Sort</h2>
              Drag configs or metrics into this section to sort by a certain key.
            </div>
            <div class="select-container">
              <div class="select-label">
                order:
              </div>
              <select class="sort-order">
                <option selected value="asc">Ascending</option>
                <option value="desc">Descending</option>
              </select>
            </div>
            <div class="sort-area"></div>
          </div>
        <% } %>

        <div class="next-section-container menu-section-container set-headings-container menu1">
            <div class="set-headings-info">
                <h2>Customize</h2>
                Drag any fields into this section to use as custom model table headings.
            </div>
            <div class="selected-area set-headings-area"></div>
            <button class="set-headings-button set-headings-button-disabled">Generate</button>
        </div>

      </div>

      <div class="tab" data-id="0">

        <div class="project-info-container">
          <h1 class="project-name"></h1>
          <div class="project-num-models"></div>
          <div class="project-author"></div>
          <div class="project-description"></div>
        </div>

        <div class="summary-chart-container">
          <div class="summary-chart"></div>
          <div class="model-card"></div>
        </div>

        <div class="visualizations-container">
          <h1>Explore Visualizations</h1>
          <div class="visualizations-description">
            Generate charts to visualize trends in data by selecting fields to plot as x and y values. Optionally pick fields to group by and specify what type of aggregation to use.
          </div>
          <div class="visualization-options">
            <div class="select-container">
              <div class="select-label">
                y-axis:
              </div>
              <select class="y-axis"></select>
            </div>
            <div class="select-container">
              <div class="select-label">
                x-axis:
              </div>
              <select class="x-axis"></select>
            </div>
            <div class="select-container">
              <div class="select-label">
                group by:
              </div>
              <select class="z-axis">
                <option>None</option>
              </select>
            </div>
            <div class="select-container">
              <div class="select-label">
                aggregate:
              </div>
              <select class="aggregate">
                <option selected>average</option>
                <option>sum</option>
                <option>median</option>
                <option>variance</option>
                <option>stdev</option>
                <option>count</option>
              </select>
            </div>
            <button class="compare-button">Compare</button>
          </div>
          <div class="explore-chart"></div>
        </div>

        <div class="parameter-explore-container">
          <h1 class="ExpPara">Explore Parameters</h1>
        </div>

      </div> <!-- end tab0 -->

      <div class="tab" data-id="1">

        <div class="groups-bar-container">
          <div class="groups-bar"></div>
        </div>

        <div class="data-table">
          <div class="model-headings">
            <div class="model-heading model-ids">
              IDs
              <div
                class="triangle-container asc sorted"
                data-key="id"
                data-order="asc"
              >
                <div class="triangle-up">&#8593;</div>
                <div class="triangle-down">&#8595;</div>
              </div>
              <select class="dropdown-sort">
                <option value="" disabled>None</option>
                <option value="id" selected>id</option>
              </select>
            </div>
            <div class="model-heading model-dataframe">
              DataFrame
              <div class="triangle-container">
                <div class="triangle-up">&#8593;</div>
                <div class="triangle-down">&#8595;</div>
              </div>
              <select class="dropdown-sort">
                <option value="" disabled selected>None</option>
                <option value="DataFrame ID">DataFrame ID</option>
              </select>
            </div>
            <div class="model-heading model-spec">
              Specifications
            </div>
            <div class="model-heading model-metrics">
              Metrics
              <div class="triangle-container">
                <div class="triangle-up">&#8593;</div>
                <div class="triangle-down">&#8595;</div>
              </div>
              <select class="dropdown-sort metrics-sort">
                <option value="" disabled selected>None</option>
              </select>
            </div>
            <div class="model-heading model-misc">
              Misc.
            </div>
          </div>
          <div class="models-container">
            <div class="models"></div>
          </div>
        </div>

      </div> <!-- end tab1 -->

    </div>

    <div class="md-modal md-effect-1" id="modal-1">
      <div class="md-content">
        <div class="md-header">
          Model <div class="md-model-id"></div> Annotations
        </div>
        <div class="md-body">
          <div class="md-annotations">
          </div>
          <div class="md-input-container">
            <input class="md-input" placeholder="Add annotation..."></input>
            <img class="md-send" src='<%= rootPath %>/images/send.png'/>
          </div>
        </div>
      </div>
    </div>

    <div class="md-modal md-effect-1" id="modal-2">
      <div class="md-content">
        <div class="md-header">
          Additional Metadata
        </div>
        <div class="md-body">
          <div id="md-json">
          </div>
        </div>
      </div>
    </div>

    <div class="md-modal md-effect-1" id="modal-table">
      <div class="md-content">
        <div class="md-header">
          Models
        </div>
        <div class="md-body">
          <div id="md-table">
            <table class="table">
              <thead>
                <tr class="model-headings" id="md-table-headings"></tr>
              </thead>
              <tbody id="md-table-body"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="md-overlay"></div>

  </body>
</html>
